<template>
	<el-dialog v-model="_d.visible" draggable :close-on-click-modal="false" width="800px">
		<template #header>
			<div style="color: #fff">{{_d.record ? '编辑' : '添加'}}项目</div>
		</template>
	  <el-form class="form-box" :model="_d.form" ref="formRef" :rules="_d.rules" label-width="auto">
			<el-form-item label="关联预算" prop="budgetId">
				<el-select v-model="_d.form.budgetId" placeholder="请选择" style="width: 100%">
    			<el-option v-for="item in _d.budgeList" :key="item.id" :label="item.name" :value="item.id">
    				<div class="flex justify-between flex-wrap">
    					<span style="max-width: 100%;">{{item.name}}</span>
    					<div style="font-size: 12px;color:#aaa;" class="flex">
    						<span style="margin-right: 10px;min-width: 150px;">发布金额：{{item.allocatedAmount}}元</span>
    						<span style="min-width: 150px;">未匹配金额：{{item.unallocatedAmount}}元</span>
    					</div>
    				</div>
    			</el-option>
    		</el-select>
			</el-form-item>
			<el-form-item label="项目名称" prop="projectName">
				<el-input v-model="_d.form.projectName" placeholder="请输入项目名称" clearable />
			</el-form-item>
			<el-form-item label="项目类别" prop="projectTemplateId">
				<el-select v-model="_d.form.projectTemplateId" placeholder="请选择" style="width: 100%" @change="changeProjectTemplate">
    			<el-option v-for="item in _d.categoryList" :key="item.id" :label="item.projectName" :value="item.id"/>
    		</el-select>
			</el-form-item>
			<el-form-item label="采购方式" prop="procurementCatalogId">
				<el-select v-model="_d.form.procurementCatalogId" placeholder="请选择" style="width: 100%">
    			<el-option v-for="item in _d.chaseList" :key="item.value" :label="item.label" :value="item.value"/>
    		</el-select>
			</el-form-item>
			<el-form-item label="项目金额" prop="budget">
				<div class="flex items-center">
					<el-input-number v-if="_d.maxAmount" class="budget-ipt" style="width: 200px;" v-model="_d.form.budget" 
						:controls="false" 
						placeholder="请输入"
						:min="_d.miniAmount"
						:max="_d.maxAmount"></el-input-number>
					<el-input-number v-else class="budget-ipt" style="width: 200px;" v-model="_d.form.budget" 
						:controls="false" 
						placeholder="请输入"
						:min="_d.miniAmount"></el-input-number>
					<b class="px-10">元</b>
				</div>
			</el-form-item>
			<el-form-item label="负责人" prop="aa5">
				<span>{{_d.form.managersName}}</span>
			</el-form-item>
			<el-form-item label="联系方式" prop="aa6">
				<span>{{_d.form.phone}}</span>
				<!-- <el-input v-model="_d.form.aa6" placeholder="电话" clearable /> -->
			</el-form-item>
			<el-form-item label="项目描述" prop="description">
				<el-input v-model="_d.form.description" type="textarea" :rows="6" placeholder="请输入" clearable />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancel">关 闭</el-button>
				<el-button :loading="_d.btnLoading" type="primary" @click="save">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
import {verifyPhone, verifyTelPhone} from "/@/utils/toolsValidate.ts";
import {$get, $post} from '/@/utils/request';
import {useUserInfo} from "/@/stores/userInfo.ts";


const emits = defineEmits(['reload']);

const oUserInfo = useUserInfo();
const formRef = ref();

const _d = reactive({
	visible: false,
	btnLoading: false,

	record: null,

	form: {
		budgetId: '',
		projectName: '',
		projectTemplateId: '',
		procurementCatalogId: null,
		procurementMethod: '',
		budget: null,
		managersName: '',
		managersId: '',
		phone: '',
		description: '',
	},
	
	rules: {
		budgetId: [
			{ required: true, message: '关联预算不能为空', trigger: 'blur' }
		],
		projectName: [
			{ required: true, message: '项目名称不能为空', trigger: 'blur' }
		],
		projectTemplateId: [
			{ required: true, message: '类别不能为空', trigger: 'blur' }
		],
		procurementCatalogId: [
			{ required: true, message: '采购方式不能为空', trigger: 'blur' }
		],
		budget: [
			{ required: true, message: '项目金额不能为空', trigger: 'blur' }
		],
	},

	// 项目类别
	categoryList: [],
	miniAmount: 0,
	maxAmount: '',

	// 采购方式
	chaseList: [],

	// 预算列表
	budgeList: []
});

onMounted(() => {
	getBudgeList();
});

// 打开弹窗
const open = (id) => {
	if(!id) {
		_d.record = null;
		_d.form.budgetId = '';
		_d.form.projectName = '';
		_d.form.budget = null;
		_d.form.description = '';
		_d.form.projectTemplateId = '';
		_d.form.procurementCatalogId = null;
		_d.form.managersName = oUserInfo.$state.userInfos.realName;
		_d.form.managersId = oUserInfo.$state.userInfos.userId;
		_d.form.phone = oUserInfo.$state.userInfos.phone;
	} else {
		getDetail(id);
	}
	formRef.value?.clearValidate();
		
	// 获取列别列表
	getCategoryList();
	// 获取采购方式列表
	getChaseList();

	_d.visible = true;
};

// 取消
const cancel = () => {
	_d.visible = false;
};

// 获取预算列表
const getBudgeList = async () => {
	let params = {
		isApproved: true
	}
	var res = await $get('/budgetSrv/getapprovedbudget', params);
	_d.budgeList = res.result;
}

// 获取详情
const getDetail = (id) => {
	$post('/projectService/getproject', id).then(res => {
		let obj = res.result;
		_d.record = obj;
		_d.form.budgetId = obj.budgetId;
		_d.form.projectName = obj.projectName;
		_d.form.projectTemplateId = obj.projectTemplateId;
		_d.form.procurementCatalogId = obj.procurementCatalogId;
		_d.form.budget = obj.budget;
		_d.form.managersName = obj.sysUser.realName;
		_d.form.phone = obj.sysUser.phone;
		_d.form.description = obj.description;
	})
}

// 获取列别列表
const getCategoryList = () => {
	let params = {
		input: 0
	}
	$get('/projectTemplateModule/getprojecttemplate', params).then(res => {
		_d.categoryList = res.result;
	})
}

// 获取采购方式列表
const getChaseList = () => {
	$post('/projectcfgsrv/getpurchase/0').then(res => {
		_d.chaseList = res.result.map(item => ({
			label: item.name,
			value: item.id
		}));
	})
}

// 保存
const save = () => {
	formRef.value.validate(async (valid) => {
		if (!valid) return;
		if(!_d.record) {
			addData();
		} else {
			editData();
		}
	})
}

const addData = () => {
	let params = {
		project: {
			budgetId: _d.form.budgetId,
			projectName: _d.form.projectName,
			procurementCatalogId: _d.form.procurementCatalogId,
			procurementMethod: _d.chaseList.find(item => item.value == _d.form.procurementCatalogId).label,
			budget: _d.form.budget,
			managersName: _d.form.managersName,
			managersId: _d.form.managersId,
			description: _d.form.description,
		},
		projectTemplateId: _d.form.projectTemplateId
	}
	_d.btnLoading = true;
	$post('/projectService/insproject', params).then(res => {
		if(res.code == 200) {
			ElNotification({
		    title: '提示',
		    message: '添加成功',
		    type: 'success',
		  })
			emits('reload');
			_d.visible = false;
		}
	}).finally(() => {
		_d.btnLoading = false;
	})
}

const editData = () => {
	let params = {
		id: _d.record.id,
		budgetId: _d.form.budgetId,
		projectName: _d.form.projectName,
		procurementCatalogId: _d.form.procurementCatalogId,
		procurementMethod: _d.chaseList.find(item => item.value == _d.form.procurementCatalogId).label,
		budget: _d.form.budget,
		description: _d.form.description,
		projectTemplateId: _d.form.projectTemplateId
	}
	_d.btnLoading = true;
	$post('/projectService/modifyproject', params).then(res => {
		if(res.code == 200) {
			ElNotification({
		    title: '提示',
		    message: '编辑成功',
		    type: 'success',
		  })
			emits('reload');
			_d.visible = false;
		}
	}).finally(() => {
		_d.btnLoading = false;
	})
}

// 改变类别
function changeProjectTemplate(id) {
	let obj = _d.categoryList.find(item => item.id == id);
	_d.miniAmount = obj.miniAmount || 0;
	_d.maxAmount = obj.maxAmount ? obj.maxAmount-1 : '';
}

// 只能输入数字
function formateNumber(value) {
	let val = '' + Number(value);
	if(val == 'NaN') {
		_d.queryParams.ccc = value.slice(0, -1);
	}
}

// 导出对象
defineExpose({ open });

</script>
<style lang="scss" scoped>
.form-box {
	min-height: 350px;
}
.budget-ipt {
	:deep(.el-input__inner) {
		text-align: left;
	}
}
</style>
